<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>{$addon_config.title}</title>
        <link rel="stylesheet" type="text/css" href="__ADDONROOT__/static/css/basic.css">
        <link rel="stylesheet" type="text/css" href="__ADDONROOT__/static/css/book.css">
        <link rel="stylesheet" type="text/css" href="__ADDONROOT__/static/css/demo.css">
        <link rel="stylesheet" type="text/css" href="__ADDONROOT__/static/css/normalize.css">
        <script type="text/javascript" src="__ADDONROOT__/static/js/modernizr.custom.js"></script>
    </head>
    <body>
        <div id="header">
            <div id="header_content">
                <h1>{$addon_config.title}</h1>
                <a id="about_me" href="about_me" title="关于我"></a>
            </div>
        </div>
        <div id="content">
            <div class="component">
                <ul class="align">
                    <volist name="list" id="vo">
                        <li>
                            <figure class='book'>
                                <!-- Front -->
                                <ul class='hardcover_front'>
                                    <li>
                                        <img src="{$vo.cover_id|get_book_cover}" alt="" width="100%" height="100%">
                                    </li>
                                    <li></li>
                                </ul>
                                <!-- Pages -->
                                <ul class='page'>
                                    <li></li>
                                    <li>
                                        <a class="btn" href="{$vo.link_id}">查看</a>
                                    </li>
                                    <li></li>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <!-- Back -->
                                <ul class='hardcover_back'>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <ul class='book_spine'>
                                    <li></li>
                                    <li></li>
                                </ul>
                                <figcaption>
                                    <h1>{$vo.title}</h1>
                                    <span>{$vo.author}</span>
                                    <p>{$vo.description}</p>
                                </figcaption>
                            </figure>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            $("#about_me").bind('mouseenter', function() {
                $(this).addClass("me_hover");
            }).bind('mouseleave', function() {
                $(this).removeClass("me_hover");
            })
        </script>
    </body>
</html>
